<template>
  <mu-container class="scrllor ">
    <mu-card class="advert-box" v-if="advert!==''">
      <img :src="advert" alt />
    </mu-card>
    <div class="response-single-box">


     <div class="response-single">
      <div class="response-single-title">
        <div class="circle" style="background:transparent;border:none">
          <span class="iconfont icon-duihao"></span>
        </div>
        <p class="sing-title">开始充电</p>
        <!-- <p class="sing-money">¥5555</p> -->
      </div>
      <div class="response-single-list ">
        <ul>
          <li>
            <span class="fleft">充电金额</span>
            <span class="fright">{{order.ordergold}}</span>
            <div class="_clear"></div>
          </li>
          <li>
            <span class="fleft">地址</span>
            <span class="fright">{{order.address}}</span>
            <div class="_clear"></div>
          </li>
          <li>
            <span class="fleft">充电时长</span>
            <span class="fright">{{order.hour}}小时</span>
            <div class="_clear"></div>
          </li>
          <li>
            <span class="fleft">单价</span>
            <span class="fright">{{order.price}}元/小时</span>
            <div class="_clear"></div>
          </li>
          <li>
            <span class="fleft">开始时间</span>
            <span class="fright">{{order.startTime}}</span>
            <div class="_clear"></div>
          </li>
          <li>
            <span class="fleft">充电桩编号</span>
            <span class="fright">{{order.parkid}}</span>
            <div class="_clear"></div>
          </li>
        </ul>
      </div>
    </div>
      <div class="hint">注：为了您更好的体验，请您<span style="font-weight: bold;font-size: 14px">长按识别下方二维码关注</span>普天动能公众号，天天有优惠，单单有免单</div>
      <div class="gzbtn">
        <img :src="codeimg" />
      </div>
    </div>
     <div class="footer">

     </div>
  </mu-container>
</template>

<script>
import codeimg from "@/assets/image/code.jpg";
export default {
  data() {
    return {
        advert:'',
        id:this.$route.params.id,
        order:{},
        codeimg:codeimg
    };
  },
  mounted() {
    //广告
    this.$api.showAdvert(1002).then(res => {
      this.advert = res.data.result.imageUrl;
    });
      this.$api.showOrderDetail(this.id).then(res => {
         this.order = res.data.result;
      });
  }
};
</script>

<style lang="scss" scoped>
.response-single-box .response-single .response-single-title .circle .iconfont{
  color:  #31D19E
}
  .hint{
    width: 80%;
    margin:0 auto;
    color:#00FFFF;
    margin-top: 30px;
    font-family:PingFangSC-Regular,PingFang SC;
  }
  .gzbtn{
    text-align:center;
    margin: 0 auto;
    width:60%;
    margin-top:30px;
  }
  .gzbtn img{
    width: 300px;
    height: 300px;
    border-radius: 15px;
  }
</style>
